<template>
  <div class="audienceAnalysis">
    <div
      v-loading="loading"
      v-if="loading"
      class="loading"
      element-loading-text="拼命加载中..."
      element-loading-spinner="el-icon-loading"
    ></div>
    <template v-if="!loading&&vipRootObj[7][39].owner">
      <div class="dis_box">
        <p class="title">观众性别分析</p>
        <div>
          <GenderSpread
            v-if="genderRate.length && (genderRate[0].value || genderRate[1].value)"
            :pieData="genderRate"
            class="GenderSpread"
          />
          <p v-else style="font-size:14px;text-align:center;line-height:70px;color:#888;">暂无数据</p>
        </div>
        <p class="title">观众年龄分析</p>
        <div class="chart">
          <BarChart pieName="年龄占比" v-if="ageRate.length" :pieData="ageRate" />
          <div class="no_data" v-else>
            <img src="@/assets/shi/zanwushuju.png" alt />
            <div>暂无数据</div>
          </div>
        </div>
      </div>
      <div>
        <p class="title" style="margin-bottom:25px;">观众地域分布</p>
        <div class="chart1">
          <SideBarChart v-if="starRate" :pieData="starRate" pieName="观众地域占比" />
          <div class="no_data" v-else>
            <img src="@/assets/shi/zanwushuju.png" alt />
            <div>暂无数据</div>
          </div>
        </div>
      </div>
    </template>
    <div class="audience_vip_wrap" v-if="!vipRootObj[7][39].owner">
      <payVip
        routerName="FansPortrait"
        :lowestVipNum="vipRootObj[7][39].ownerMinLevel"
      />
    </div>
  </div>
</template>

<script>
import GenderSpread from '@/pages/wang/workbench/GenderSpread.vue';
import BarChart from './BarChart.vue';
import SideBarChart from '@/pages/wang/talent/tdetails/NewComponents/SideBarChart.vue';
export default {
  props: {},
  data() {
    return { 
      ageRate: [],
      genderRate: [],
      starRate: null,
      loading: false,
      vipRootObj: this.$store.state.userRoot, //会员权限对象
    };
  },
  components: { GenderSpread, BarChart, SideBarChart },

  computed: {},
  watch: {},
  created() {},
  mounted() {
    if (this.vipRootObj[7][39].owner) {
      this.GetAudienceAnalysis();
    }
  },

  methods: {
    // 获取观众分析
    GetAudienceAnalysis() {
      this.loading = true;
      this.$axios
        .get(`api/aweme/persons?api-version=2`, {
          params: {
            awemeId: this.$route.query.id
          }
        })
        .then(result => {
          if (result.data.code == 0) {
            this.loading = false;
            this.ageRate = result.data.data.age_chart;
            this.genderRate = result.data.data.gender_chart;
            this.starRate = result.data.data.province_chart;

            let num = this.starRate.map(element => {
              return element.value;
            });
            let j = eval(num.join('+'));
            this.starRate.forEach(element => {
              element.value = ((element.value / j) * 100).toFixed(2);
            });
          } else {
            this.loading = false;
          }
        })
        .catch(err => {});
    }
  }
};
</script>

<style lang="less" scoped>
.audienceAnalysis {
  height: 100%;
  .dis_box {
    position: relative;
    height: 393px;
  }
  .audience_vip_wrap{
    width: 100%;
    height: 100%;
    background: url("~@/assets/shi/xiaodian1.png") no-repeat;
    background-size: cover;
  }

  .loading {
    width: 100%;
    justify-content: center;
  }
  display: flex;
  padding-left: 20px;
  padding-right: 20px;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  > div {
    width: 50%;
  }
  .title {
    font-size: 16px;
    font-weight: 600;
    color: #222222;
    position: relative;
    text-indent: 10px;
    // margin-bottom: 20px;
    &::after {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 4px;
      height: 16px;
      background-color: #fd7f2c;
      border-radius: 2px;
    }
  }
  .chart {
    width: 100%;
    height: 310px;
    position: relative;
    #live_pie {
      width: 100%;
      height: 214px;
      margin-top: -20px;
    }
  }
  .chart1 {
    position: relative;
    width: 100%;
    height: 310px;
  }
  #GenderSpread {
    height: 104px;
  }
  .no_data {
    height: 300px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    color: #b5b5b5;
  }
}
</style>
